{% extends 'base.html' %}
{% load l10n %}
{% load static %}
{% block title %}Covid19 Boletins Diários - {{ block.super }}{% endblock %}

{% block head %}
{{ block.super }}
<!-- cdnjs -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.material.min.css">
<script type="text/javascript" language="javascript"
  src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'covid19/css/status.css' %}" />
{% endblock %}

{% block nav %}
{% include 'covid19/links.html' %}
{% endblock %}

{% block content %}{% localize on %}
<div id="dashboard-header" class="p-5">
  <div class="card yellow lighten-5" style="padding: 20px; text-align: justify;">
    <p>
      Por questões de viabilidade e metodológicas, coletamos apenas das
      Secretarias Estaduais de Saúde e, por isso, podem ocorrer divergências com
      relação às Secretarias Municipais. Não pretendemos mudar essa prática (por
      favor, não insista).
    </p>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="center" style="display: block">
      {% regroup bulletins by date.month as bulletins_list %}

      {% for month in bulletins_list %}
      <div class="divider"></div>
      <h2 class="monthYearBulletins">{{ month.list.0.date|date:"F" }} {{ month.list.0.date|date:"Y" }}</h2>
      {% for bulletin in month.list %}
      <div style="display: inline-block; width: 200px; height: auto; margin: 1em">
        <a href="{{ bulletin.image_url }}" target="_blank">
          <img class="lazy hoverable z-depth-2" id="{{ bulletin.pk }}" data-src="{{ bulletin.image_url }}" width="200px"
            height="auto" name="Boletim - {{ bulletin.date }}" />
        </a>
        <div class="dateBulletins">
          <span class="bDate">{{ bulletin.date }}</span>
        </div>
      </div>
      {% endfor %}
      <br><br>
      {% endfor %}
    </div>
  </div>
</div>

{% endlocalize %}
{% endblock %}

{% block script %}
{{ block.super }}
<script type="text/javascript">
   $(function() {
      $('.lazy').Lazy({
        scrollDirection: 'vertical',
        effect: 'fadeIn',
        effectTime: 1000,
        visibleOnly: true,
        defaultImage: "",
        afterLoad: function(element) {
            $("#" + element[0].id).attr('title', element[0].name )
            $("#" + element[0].id).attr('alt', element[0].name )
        }
      });
   });
</script>
{% endblock %}
